<template>
  <el-form class="component-click-statics" v-if="pages">
    <dropdown-normal class="width-30" v-if="isClickStatics" v-model="date" :valLists="dates" label="选择统计天数" @change="onUpdateClickStatics"></dropdown-normal>
    <div class="pages-con" v-if="siteAttrs">
      <div class="pages" :key="getCurrentPage.id" :style="pageHei">
        <div class="page-con" :style="siteStyles_">
          <group-component :item="getCurrentPage" class="page" :style="pageStyles"></group-component>
        </div>
      </div>
      <div class="page-btns-con">
        <el-button-group v-if="siteAttrs">
          <el-button class="page-btn" @click.stop="onPrePage">上一页</el-button>
          <el-button type="text" class="page-number">{{pageNumber}}</el-button>
          <el-button class="page-btn" @click.stop="onNextPage">下一页</el-button>
        </el-button-group>
      </div>
    </div>
  </el-form>
</template>

<script>
import GroupComponent from "@/components/group-component.vue"
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import { bgPositionStyle } from '@/store/utils'
import { getPxOVwByValue } from '@/store/utils'

import { mapState, mapActions } from 'vuex'
import { PAGE_TYPE } from '@/common/const'
import { PREVIEW_WIDTH } from '@/common/const-dif'
import { reactive } from 'vue'

export default {
  setup () {
    const state =  reactive({
      pageNumber: "1/1",
    })
    const state_ = {
      pageIndex: 0,
      dates: [ { name: '全部', value:0 }, { name: '一天内', value:1 }, { name: '三天内', value:3 }, { name: '七天内', value:7 } ],
      date: 0,
    }
    _.merge(state, state_)
    return state
  },
  components: {
    GroupComponent,
    DropdownNormal,
  },
  props: ['isClickStatics', 'site_id'],
  beforeMount() {
    // 设置 isDisplayClickStatics: true ，显示 点击数
    this.$store.commit("user/updataIsDisplayClickStatics", {isDisplayClickStatics: this.isClickStatics});

    // 获取 站点 的 点击数 数据
    if(this.isClickStatics){
      this.updateClickStatics({ site_id: this.site_id });
    }
  },
  mounted() {
  },
  computed: {
    ...mapState("user", {
      siteAttrs: state => state.siteData.attrs,
      pages: state =>state.siteData.pages,
    }),
    pageHei() {
      let styles_ = {}
      if (this.siteAttrs && this.siteAttrs.pageType == PAGE_TYPE.single) {
        styles_.overflow = "hidden"
      } else {
        styles_.overflowY = "auto"
      }
      return styles_
    },
    getCurrentPage() {
      return this.pages[this.pageIndex];
    },
    siteStyles_(){
      let page = this.getCurrentPage;
      let styles_ = {
        backgroundColor: this.siteAttrs.backgroundColor,
        backgroundImage: 'url(' + this.siteAttrs.bgUrl + ')'
      }
      let previewScale = PREVIEW_WIDTH/page.attrs.width;
      styles_.height = getPxOVwByValue(page.attrs.height*previewScale)
      styles_.width = getPxOVwByValue(page.attrs.width*previewScale)
      return styles_
    },
    pageStyles() {
      let page = this.getCurrentPage;
      let pageStyle = _.cloneDeep(this.getPageStyles(page))
      let previewScale = PREVIEW_WIDTH/page.attrs.width;
      pageStyle.transform = 'scale(' + previewScale + ')'
      return pageStyle;
    },
  },
  methods: {
    ...mapActions({
      updateClickStatics: 'user/updateClickStatics',
      updateSiteData: 'user/updateSiteData',
    }),
    getPageStyles(page) {
      const pageStyles_ =  {
        backgroundColor: page.attrs.backgroundColor,
        backgroundImage: 'url(' + page.attrs.bgUrl + ')',
        width: getPxOVwByValue(page.attrs.width),
        height: getPxOVwByValue(page.attrs.height),
      }
      bgPositionStyle(pageStyles_, page.attrs.bgPositionRepeatType)
      return pageStyles_
    },
    onUpdateClickStatics(){
      this.updateClickStatics({num: this.date, site_id: this.site_id})
    },
    onPrePage() {
      this.pageIndex--;
      if (this.pageIndex <= 0) {
        this.pageIndex = 0;
      }
      this.refreshPage();
    },
    onNextPage() {
      this.pageIndex++;
      if (this.pageIndex >= this.pages.length) {
        this.pageIndex = this.pages.length - 1;
      }
      this.refreshPage();
    },
    refreshPage() {
      if(!this.pages){
        return
      }
      this.pageNumber = this.pageIndex+1 + "/" + this.pages.length;
    }
  },
  updated() {
    this.refreshPage();
  },
  beforeUnmount() {
    // clear siteData
    this.updateSiteData({});

    // clear isDisplayClickStatics
    this.$store.commit("user/updataIsDisplayClickStatics", {isDisplayClickStatics: false});
  },
}
</script>
<style lang="scss">
  .pages-con {
    background-color: #ffffff;
    padding: 20px;
    margin-right: 20px;

    .page-btns-con{
      display: flex;
      justify-content: center;
    }

    .pages {
      width: 260px;
      height: 420px;
      overflow: hidden;
      overflow-y: auto;

      .page {
        transform-origin: 0 0;
        position: relative;
        background-size: auto;
        background-position: center center;
        background-repeat: repeat;
        padding-right: 10px;
      }
    }
    .el-button {
      border-radius: 0;
    }
    .el-button-group {
      margin-top: 20px;
    }
    .page-number {
      padding-left: 10px;
      padding-right: 10px;
    }
    .page-btn {
      border: 1px solid #43475c;
      padding: 8px 28px;
    }
  }
</style>
